<template>
    <div>
        <button @click="sendRequest">发送请求3000</button>
        <button @click="sendRequest2">发送请求3001</button>
    </div>
</template>
<script>

import axios from 'axios'


export default {
    Name:'',
    methods: {
        /*
            1.当前的站点端口为localhost：8080 请求的地址为3001 所以会触发跨域的报错
            报错的原因是因为这样违背了同源策略，地址 端口 http/https 这3个都要需要保持一致 不然就会报跨域的错 
            2.解决跨域问题
                1.使用代理服务器
                2.使用jsonp 通过前段和后端 的协助 通过script标签的src属性来请求数据  只能解决get请求
                3.使用cors
            3.我们这次主要是通过代理服务器的方式来解决
            vue.config.js里面注册 记得重启cli
             devServer: {
                proxy: 'http://localhost:3001', 
            },
            这边配置好之后，我们这边axio就不请求目标服务器了 而是代理服务器，所以下面的地址得改成 
            http://localhost:8081/students 端口号与启动的端口一致
            但是有缺点
            1.不能配置多个代理
            2.如果本地服务器有的话那么就优先访问本地服务器 他就不走代理了，比如说 我们public文件夹下有图标，而我想请求的是目标服务器的图标,但是
            目标的图标和我本机的图标 名称一致，那么就默认不走代理了

            // devServer: {
            //   proxy: 'http://localhost:3001',
            // },
            devServer: {
                proxy: {
                "/xfj": {
                    // 匹配所有以'/api1'开头的请求路径
                    target: 'http://localhost:3000',
                    //代理目标的基础路径
                    changeOrigin: true,  //控制服务器是否对目标主机的域进行验证，换个简单的说法就是选择是否伪装目标服务器的地址端口 true表示伪装 false不伪装
                    pathRewrite: { '^/xfj': '' }, //利用正则表达式将 /xfj 替换成 ''
                },
                '/lzj': {
                    // 匹配所有以'/api2'开头的请求路径
                    target: 'http://localhost:3001',
                    //代理目标的基础路径
                    changeOrigin: true,
                    pathRewrite: { '^/lzj': '' }
                }

                }
            }

        */
        // sendRequest(){
        //     axios.get("http://localhost:8081/students")
        //     .then(res => {
        //         console.log(res.data)
        //     })
        //     .catch(err => {
        //         console.error(err.message); 
        //     })
        // },


        sendRequest(){
            axios.get("http://localhost:8081/xfj/cars")
            .then(res => {
                console.log(res.data)
            })
            .catch(err => {
                console.error(err.message); 
            })
        },

        sendRequest2(){
            axios.get("http://localhost:8081/lzj/students")
            .then(res => {
                console.log(res.data)
            })
            .catch(err => {
                console.error(err.message); 
            })
        }
    },
}
</script>
<style>
    
</style>